#{extends 'Users/frame.html' /}

#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/edit.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/navigationbar.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/commodity.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/pager/Pager.css'}" />
#{/set}
#{set 'moreScripts'}
<script src="@{'/public/pager/jquery.pager.js'}" type="text/javascript" charset="utf-8"></script>
#{/set}
<script language="javascript">
$(function(){
	$("#mi_newArrivals").addClass("menu-select");
});
</script>
<div class="navigationBar">
	<table>
		<tr>
			<td><img src="@{'/public/images/navigationHouse.gif'}"></td>
			<td><strong>当前位置：</strong></td>
			<td>
				<a href="/">首页</a>
				>>
				<a href="/users">会员中心</a>
				>>
				<font class="current">最新到货商品</font>
			</td>
		</tr>
	</table>
</div>
<script language="javascript">
	$(function(){
		//初始化翻页控件。
		$("#pager").pager(
			{
				pagenumber: ${queryBean.currentPage}, 
				pagecount: ${queryBean.totalPage}, 
				totalcount: ${queryBean.totalQuantity},
				buttonClickCallback: PageClick 
			}
		);
		//初始化大图像。
		$(".minImg").hover(
			function () {
				var src = $(this).attr("src");
				var top = $(this).offset().top;
				var left = $(this).offset().left;
				$("#bigImg > img").attr("src", src);
				$("#bigImg").css({display:"block",left:left-170,top:top-190});
			},
			function () {
				//$("#bigImg").html("");
				$("#bigImg").css({display:"none"});
			}
		);
	});
	//翻页功能。
	PageClick = function(pageclickednumber) {
		$("#currentPage").val(pageclickednumber);
		doSearch();
	}
	
	function doSearch() {
		$("#form1").submit();
	}
</script>
<div id="edit-comment">
	<div id="errMsg" class="error"></div>
	<table class="commodity-query">
		#{form @users.newArrivals(), name:'form1', id:'form1'}
		<tr>
			<td>
				<input type="hidden" id="currentPage" name="queryBean.currentPage" value="${queryBean.currentPage}">
				每页
				<select name="queryBean.quantityEachPage" onchange="doSearch()">
					<option value="2" #{if queryBean.quantityEachPage==2} selected #{/if}>2</option>
					<option value="10" #{if queryBean.quantityEachPage==10} selected #{/if}>10</option>
					<option value="25" #{if queryBean.quantityEachPage==25} selected #{/if}>25</option>
					<option value="50" #{if queryBean.quantityEachPage==50} selected #{/if}>50</option>
				</select>
				条记录
			</td>
			<td>
				按
				<select name="queryBean.orderby" onchange="doSearch()">
					<option value="" #{if queryBean.orderby==""} selected #{/if}>--Select--</option>
					<option value="sn" #{if queryBean.orderby=="sn"} selected #{/if}>商品编号</option>
					<option value="name" #{if queryBean.orderby=="name"} selected #{/if}>商品名称</option>
				</select>
				排序
			</td>
			<td>
				<input name="queryBean.keyword" type="text" value="${queryBean.keyword}" >
				<input type="submit" value="查询">
			</td>
		</tr>
		#{/form}
	</table>
	<table class="commodity-table">
		<thead>
			<tr>
				<th width="40">图片</th>
				<th>商品编号</th>
				<th>名称</th>
				<th>剩余数量</th>
				<th>单价</th>
				<th width="75">购买数量</th>
			</tr>
		</thead>
		#{if newArraivals}
			#{list items:newArraivals, as:'commodity'}
			<tr>
				<td>
					<input type="hidden" class="commodityIds" value="${commodity.id}">
					<a href="/commodities/${commodity.id}">
						#{if commodity.images}
							#{list items:commodity.images, as:'image'}
								#{if image.sequence == 1}
								<img class="midImg" src="@{Attachments.show(image.image.id)}">
								#{/if}
							#{/list}
						#{/if}
						#{else}
						<img class="midImg" src="@{'public/images/favicon.png'}">
						#{/else}
					</a>
				</td>
				<td><a href="/commodities/${commodity.id}">${commodity.SN}</a></td>
				<td><a href="/commodities/${commodity.id}">${commodity.name}</a></td>
				<td>
					#{if commodity.onSaleStatus == models.Commodity.OnSaleStatus.ONSALE_LIMITED}
						${commodity.quantityLeft} ${commodity.unit}
					#{/if}
					#{if commodity.onSaleStatus == models.Commodity.OnSaleStatus.ONSALE_UNLIMITED}
						<font class="important">长期有货</font>
					#{/if}
					#{if commodity.onSaleStatus == models.Commodity.OnSaleStatus.OFFSALE}
						<font class="important">已下架</font>
					#{/if}
				</td>
				<td><span class="price">${commodity.price}</span>&nbsp;元</td>
				<td><input id="quantity_${commodity.id}" type="text" size="3" maxlength="4" class="input_quantity" value="0"></td>
			</tr>
			#{/list}
		#{/if}
		#{else}
			<tr>
				<td colspan="6">没找到记录。</td>
			</tr>
		#{/else}
	</table>
	<div>
		<input type="button" class="button1" value="批量购买" onClick="buyCommoditise()">
		<input type="button" class="button1" value="数量归零" onClick="resetQuantity()">
	</div>
	<div id="pager"></div>
	<div id="bigImg" class="tips"><img/></div>
	<script language="javascript">
	function resetQuantity() {
		$(".input_quantity").val("0");
	}
	function buyCommoditise(){
		var ids = $(".commodityIds");
		if(!ids || ids.length == 0) {
			alert("没有任何商品。");
		}
		var dataStr = "";
		var index = 0;
		for(var i=0 ; i<ids.length ; i++) {
			var id = ids[i].value;
			var quantity = $("#quantity_"+id).val();
			if(quantity && $.trim(quantity)!="" && $.trim(quantity)!=0) {
				if(index != 0) dataStr += "&";
				dataStr = dataStr + "commodity[" + index + "].id=" + id;
				dataStr = dataStr + "&" + "commodity[" + index + "].quantity=" + quantity;
				index++;
			}
		}
		if(dataStr == "") {
			$("#errMsg").html("购买失败，没有设置任何购买数量。");
			return;
		}
		if(!confirm("确定要购买此商品？")) return;
		$.ajax({
			url: "@{ShoppingCars.buyCommodity()}",
			data: dataStr,
			type: "GET",
			dataType: "json",
			complete: function(XMLHttpRequest, textStatus, errorThrown) {
				if(textStatus == "error") {
					var errJson = eval("("+XMLHttpRequest.responseText+")");
					var errMsg = "购买失败，"+errJson.message;
					$("#errMsg").html(errMsg);
					alert(errMsg);
				} else {
					var errMsg = "购买成功。";
					$("#errMsg").html(errMsg);
					window.open("@{ShoppingCars.shoppingCar()}");
				}
			}
		});
	}
	</script>
</div>